<template>
	<view class="my-container">
		<view class="top-title">
			<text class="top-tip">登录</text>
			<image src="/static/register/kefu-withe.png" mode="" class="kf-logo"></image>
		</view>
		<view class="register-form">
			<view style="text-align: center;">
				<image src="/static/common/logo-zn-big.png" mode="" class="top-logo"></image>
			</view>
			<form @submit="formSubmit">
				<view class="uni-form-item uni-column">
					<view class="title"><text class="uni-form-item__title">用户名</text></view>
					<view class="uni-input-wrapper">
						<input v-model="form.username" name='username' class="uni-input" type="number" focus placeholder="请输入手机号" />
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title"><text class="uni-form-item__title">登录密码</text></view>
					<view class="uni-input-wrapper">
						<input v-model="form.password" name='password' class="uni-input" type="password" focus placeholder="请输入登录密码" />
					</view>
				</view>
				<view class="forget-pwd" @tap="findPwd">忘记密码？</view>
				<view class="uni-btn-v">
					<button form-type="submit" class="my-btn" :class="{'my-btn-disabled':disabled}" :disabled="disabled">登录</button>
				</view>
			</form>
			<view class="go-another" @tap="goLogin">
				<text >没有账号？</text>
				<text style="color: #F59328;">注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: '',
				}		
			};
		},
		computed: {
			disabled() {
				if ((this.form.username !== '') && (this.form.password !== '')) {
					return false
				} else {
					return true
				}
			},
			showName() {
				if (this.form.username === '') {
					return true
				} else {
					return false
				}
			},
			showPwd() {
				if (this.form.password === '') {
					return true
				} else {
					return false
				}
			}
		},
		methods: {
			formSubmit(e) {
				var formdata = e.detail.value
				if (this.showName && this.showPwd) {
					uni.showToast({
						title: '请填写完整',
						duration: 1000,
						mask: true
					});
				} else {

					return false
				}
			},
			goLogin(){
				uni.navigateTo({
					url:"/pages/register/register"
				})
			},
			findPwd(){
				uni.navigateTo({
					url:'/pages/findPwd/findPwd'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-container {
		background: #F59328;
	}

	.top-title {
		display: flex;
		justify-content: space-around;
		padding-top: 40rpx;
		margin-bottom: 40rpx;

		.top-tip {
			font-size: 48rpx;
			height: 70rpx;
			line-height: 70rpx;
			color: #FFFFFF;
			border-bottom: 2px solid #FFFFFF;
		}

		.kf-logo {
			width: 86rpx;
			height: 76rpx;
		}
	}

	.register-form {
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		background-color: #FFFFFF;
		padding-top: 40rpx;
		.top-logo{
			height: 120rpx;
		}
	}
	.uni-form-item__title {
		font-size: 32rpx;
		color: #333333;
	}
	.forget-pwd{
		font-size: 32rpx;
		color: #474F66;
		margin: 26rpx;
		text-align: right;
	}
	.go-another{
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
	}
	.uni-input-wrapper {
		display: flex;
		padding: 8px 13px;
		flex-direction: row;
		flex-wrap: nowrap;
		background-color: #FFFFFF;
		box-sizing: border-box;
	}
	.uni-input {
		height: 28px;
		line-height: 28px;
		font-size: 15px;
		padding: 0px;
		flex: 1;
		background-color: #FFFFFF;
		border-bottom: 1px solid #EEEEEE;
	}

	.uni-icon {
		font-family: uniicons;
		font-size: 24px;
		font-weight: normal;
		font-style: normal;
		width: 24px;
		height: 24px;
		line-height: 24px;
		color: #999999;
	}
</style>
